<template>
 <input
   @focus="isFocus=true"
   @blur="isFocus= false"
   :class="{inputFocus: isFocus, inputBlur: false
   }"/>
</template>
<script>
export default{
    data(){
        return {
            isFocus:false,
        }
    },
    methods:{},
}
</script>
<style scoped>
input{
    width: 10px;
    transition: all 1s;
}
.inputFocus{
    width: 150px;
}
.inputBlur{
    width: 10px;
}
</style>